<!--
 * @Description: 
 * @Version: 
 * @Autor: Gao Yu
 * @Date: 2019-07-16 18:39:08
 * @LastEditors  : Gao Yu
 * @LastEditTime : 2020-01-08 09:48:37
 -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery鼠标悬停气泡展示</title>

<link type="text/css" href="css/style.css" rel="stylesheet" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	
</head>

<body>

<!--学历提升优势开始-->
<div class="superiority">

	<div class="super_text">
 
        <div class="super_content">
        	<div class="superli">
            	<ul>
                	<li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a>服务开通与编排</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a>服务请求管理</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a>监控与分析</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a >资源发现与分析</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a>费用管理与资源优化</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a >云迁移与灾备</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a >身份认证与安全合规</a></li>
                    <li  onclick="interactive.openGreatBear('0', '')" aos="zoom-in"><a >集成与交付</a></li>
                </ul>
            </div>
            <div class="supertext">
            	<div class="supert"><p>提供可视化的执行过程，您可以看到完整的执行过程和执行结果</p></div>
                <div class="supert"><p>基于策略的自动化交付云服务请求，将不同场景、不同环境的标准化流程、规范落地到平台的自动化过程中</p></div>
                <div class="supert"><p>结合海量原子化脚本，提供实时监控预警、智能日志管理，实现云应用的健康监控分析</p></div>
                <div class="supert"><p>通过直观的检查云资源之间的关系来轻松检查资产状态</p></div>
                <div class="supert"><p>最全面的云费用分析及成本优化服务，帮您最大程度节省云费用</p></div>
                <div class="supert"><p>借助合作伙伴关系和专业的服务，加快迁移速度并缩短见效时间</p></div>
                <div class="supert"><p>事前授权、事中监控、事后审计</p></div>
                <div class="supert"><p>持续集成，产品仓库，一键部署到云端</p></div>
            </div>
        
		
    </div>
	   
</div>
	


<script type="text/javascript">
$(function(){
	$(".superli ul li").mouseover(function(){
		$(this).addClass('superhover').siblings().removeClass('superhover');
		var index = $(this).index();
		number = index;
		$('.supert').hide();
		$('.supert:eq('+index+')').show();
	});
	
	var auto = 1;  //等于1则自动切换，其他任意数字则不自动切换
	if(auto ==1){
		var number = 0;
		var maxNumber = $('.superli ul li').length;
		function autotab(){
			number++;
			number == maxNumber? number = 0 : number;
			$('.superli ul li:eq('+number+')').addClass('superhover').siblings().removeClass('superhover');
			$('.supert:eq('+number+')').show().siblings().hide();
		}
		var tabChange = setInterval(autotab,3000);
		//鼠标悬停暂停切换
		$('.superli').mouseover(function(){
			clearInterval(tabChange);
		});
		$('.superli').mouseout(function(){
			tabChange = setInterval(autotab,3000);
		});
	  }
});	
</script>
<!--学历提升优势结束-->
</body>
</html>
